<template>
	<div class="star" :class="starType">
		<span v-for="item in itemClass" :class="item" class="star-item">
			
		</span>
	</div>
</template>

<script>
	const LENGTH=5;
	const CLS_ON='on';
	const CLS_HALF='half';
	const CLS_OFF='off';
	export default{
		name:'star',
		props:{
			score:{
				type:Number
			},
			size:{
				type:Number
			}
		},
		computed:{
			starType(){
				return 'star'+this.size
			},
			itemClass(){
				let results=[]
				//获取评分
				let score=Math.floor(this.score*2)/2
				//是否含有半颗星
				let isHasHalf=score%1==0
				//计算全星的个数
				let hasOn=Math.floor(score)
				//把全星放入数组中
				for(let i=0;i<hasOn;i++){
					results.push(CLS_ON)
				}
				//计算半星
				if(!isHasHalf){
					results.push(CLS_HALF)
				}
				//判断长度是否大于5
				while(results.length<LENGTH){
					results.push(CLS_OFF)
				}
				
				return results
			}
		}
	}
</script>

<style lang="scss">
	@import "../common/style/mixin.scss";
	.star{
		font-size: 0;
		.star-item{
			display: inline-block;
			background-repeat: no-repeat;
		}
		&.star48{
			.star-item{
				width:20px;
				height: 20px;
				margin-right: 20px;
				background-size: 20px 20px;
				&:last-child{
					margin-right: 0;
				}
				&.on{
					@include bg-image('../common/img/star48_on')
				}
				&.half{
					@include bg-image('../common/img/star48_half')
				}
				&.off{
					@include bg-image('../common/img/star48_off')
				}
			}
		}
		&.star36{
			.star-item{
				width:15px;
				height: 15px;
				margin-right:6px;
				background-size: 15px 15px;
				&:last-child{
					margin-right: 0;
				}
				&.on{
					@include bg-image('../common/img/star36_on')
				}
				&.half{
					@include bg-image('../common/img/star36_half')
				}
				&.off{
					@include bg-image('../common/img/star36_off')
				}
			}
		}
		&.star24{
			.star-item{
				width:10px;
				height: 10px;
				margin-right: 4px;
				background-size: 10px 10px;
				&:last-child{
					margin-right: 0;
				}
				&.on{
					@include bg-image('../common/img/star24_on')
				}
				&.half{
					@include bg-image('../common/img/star24_half')
				}
				&.off{
					@include bg-image('../common/img/star24_off')
				}
			}
		}
	}
</style>
